<template>
	<view class="sys-message">
		<view v-if="type === 'SYS'" class="message-type-img sys"><view class="icon iconfont icon-xiaoxi2"></view></view>
		<view v-else-if="type === 'ACCOUNT'" class="message-type-img account"><view class="icon iconfont icon-laba"></view></view>
		<view v-else class="message-type-img money"><view class="icon iconfont icon-tianchongxing-"></view></view>

		<view class="sys-message-info">
			<view class="message">{{ message.message }}</view>
			<view class="time">{{ message.time | messageTimeFormat }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: String,
		message: Object
	},
	filters: {
		messageTimeFormat(time) {
			let today = new Date();
			let oldDate = new Date(parseInt(time));
			if (today.getFullYear() === oldDate.getFullYear() && today.getMonth() === oldDate.getMonth() && today.getDay() === oldDate.getDay()) {
				let hour = oldDate.getHours();
				if (hour < 12) {
					return hour + ':' + oldDate.getMinutes() < 10 ? '0' + oldDate.getMinutes() : oldDate.getMinutes() + ' AM';
				} else {
					return hour - 12 + ':' + oldDate.getMinutes() + ' PM';
				}
			} else {
				let s = `${oldDate.getFullYear()}年${oldDate.getMonth() < 10 ? '0' + oldDate.getMonth() : oldDate.getMonth()}月${
					oldDate.getDay() < 10 ? '0' + oldDate.getDay() : oldDate.getDay()
				}日  ${oldDate.getHours() < 10 ? '0' + oldDate.getHours() : oldDate.getHours()}:${oldDate.getMinutes() < 10 ? '0' + oldDate.getMinutes() : oldDate.getMinutes()}`;
				return s;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.sys-message {
	padding: 20rpx 40rpx;
	display: flex;
	flex-direction: row;
	border-bottom: 1rpx solid #cccccc;
	.message-type-img {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		.iconfont {
			color: #ffffff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 58rpx;
		}
	}

	.sys-message-info {
		flex: 1;
		.message {
			color: #333333;
			font-size: 32rpx;
			line-height: 35rpx;
		}
		.time {
			font-size: 28rpx;
			margin-top: 15rpx;
			color: #999999;
		}
	}

	.sys {
		.iconfont {
			font-size: 80rpx;
		}
		background: linear-gradient(180deg, #9680ff, #836cff);
	}
	.account {
		.iconfont {
			font-size: 70rpx;
		}
		background: linear-gradient(180deg, #4279fb, #3366f9);
	}
	.money {
		background: linear-gradient(180deg, #ffb281, #ffa16b);
	}
}
</style>
